<script>

import { mapState, mapMutations } from 'vuex';
import vuex_store from '../store';

export default {
    name: 'PageHeader',
    store: vuex_store, //应用vuex状态机
    computed: {
        ...mapState({
            keyword: state => state.keyword,
        }),
    },
    methods: {
        ...mapMutations(['changeKeyword'])
    }

}
</script>

<!-- scoped 可以限制作用域 -->
<style scoped>
.head {
    height: 55px;
    background: #41B883;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.container {
    margin: 0 auto;
    width: 710px;
    height: 100%;
    position: relative;
}

@media screen and (max-width: 400px){
    .search {
        outline: none;
        border: 1px solid #39A173;
        height: 30px;
        position: absolute;
        left: 0;
        width: 50%;
        top: 50%;
        margin-top: -15px;
        padding: 0 10px;
        background: #fff url(../assets/search.svg) no-repeat right center;
        background-size: 30px;
    }
}
@media screen and (min-width: 400px){
    .search {
        outline: none;
        border: 1px solid #39A173;
        width: 400px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -15px;
        padding: 0 10px;
        background: #fff url(../assets/search.svg) no-repeat right center;
        background-size: 30px;
    }
}


</style>

<template>
    <div class="head">
        <div class="container">
            <input class="search" type="text" :value="keyword" @input="changeKeyword($event.target.value)" placeholder="请输入关键字" />
        </div>
    </div>
</template>
